<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title of the document</title>
	<script src="./ImagesLoaded_files/jquery-2.1.3.min.js"></script>
	<script src="./ImagesLoaded_files/imagesloaded.pkgd.js"></script>
	<script type="text/javascript">
		$( document ).ready(function() {
	 		var $container = $('#container');
		
	 		var imgLoad = imagesLoaded( $container );
	 		imgLoad.on( 'always', function( instance ) {
			  console.log('ALWAYS - all images have been loaded');
			});
			imgLoad.on( 'done', function( instance ) {
			  console.log('DONE  - all images have been successfully loaded');
			});

			imgLoad.on( 'fail', function( instance ) {
			  console.log('FAIL - all images loaded, at least one is broken');
			});

			imgLoad.on( 'progress', function( instance, image ) {
			  var result = image.isLoaded ? 'loaded' : 'broken';
			  console.log( 'image is ' + result + ' for ' + image.img.src );
			});

	 	});

	</script>

</head>

<body>
	   <img src="http://lorempixel.com/600/200/people/"   alt=""  id='container'/>
                
</body>

</html>